import React, { useEffect, useState } from "react";
import {
  ShareSheet,
  Search,
  Sidebar,
  ProductCard,
  Tag,
} from "react-vant";
import { NavBar } from 'antd-mobile'
import { useNavigate } from "react-router";
<<<<<<< HEAD
import { SendOutline } from 'antd-mobile-icons'
=======
import { Replay } from "@react-vant/icons";
>>>>>>> wx
import styles from "./index.module.css";
import http from "../../utils/http";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [pageCode] = useState(1);
  const [pageSize] = useState(30);
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState("");
  const [active, setActive] = useState(0);
  const options = [
    [
      { name: "微信", icon: "wechat" },
      { name: "朋友圈", icon: "wechat-moments" },
      { name: "QQ", icon: "qq" },
    ],
  ];
  const [list, setList] = useState([]);
  const [yaolist, setYaolist] = useState([]);

  const FearchList = async () => {
    const res = await http.get("/restorative/type");
    const { code, data } = res.data;
    if (code === 200) {
      setList(data);
    }
  };
  const FearchYaoList = async () => {
    const res = await http.get("/restorative/list", {
      params: {
        pageCode,
        pageSize
      }
    });
    const { code, data } = res.data;
    if (code === 200) {
      setYaolist(data);
    }
  };
  useEffect(() => {
    FearchList();
    FearchYaoList();
  }, []);
  return (
    <div className={styles.cate}>
      <div className={styles.top}>
        <NavBar onBack={() => navigate('/')} style={{ background: '#fff', }} right={<SendOutline onClick={() => setVisible(true)} fontSize={'25px'} />}>药房分类</NavBar>
        {/* 搜索 */}
        <Search
          value={value}
          onChange={setValue}
          clearable
          shape="round"
          placeholder="请输入搜索关键词"
          onClickInput={() => navigate("/shopsearch")}
        />
      </div>
      <div className={styles.content}>
        {/* 左边部分 */}
        <div className={styles.left}>
          {/* 侧边导航 */}
          <Sidebar
            value={active}
            onChange={(v) => {
              setActive(v);
            }}
          >
            {list.map((item: any, ind) => {
              return (
                <Sidebar.Item key={ind} title={item.restorativesstatename} />
              );
            })}
          </Sidebar>
        </div>
        {/* 右边部分 */}
        <div className={styles.right}>
          {yaolist.map((item: any, ind) => {
            return (
              <ProductCard
                tags={<Tag type="danger">处方药</Tag>}
                key={ind}
                price={item.restorativesprice}
                desc={item.restorativesdesc}
                title={item.restorativesname}
                thumb={item.restorativesimage}
              />
            );
          })}
        </div>
      </div>

      {/* 分享 */}
      <ShareSheet
        visible={visible}
        options={options}
        title="--分享至--"
        onCancel={() => setVisible(false)}
        onSelect={() => {
          setVisible(false);
        }}
      />
    </div>
  );
};

export default Index;
